<template>
      <!--使用组件-->
        <div>
            <home-header :city="city"></home-header>
            <home-swiper :swiper="swiper"></home-swiper>
            <home-icons :iconsData="icons"></home-icons>
            <home-other :hotbdan="hotbdan" :yLike="yLike"></home-other>
            <home-week :weekList="weekList"></home-week>
            <home-footer></home-footer>
        </div>
</template>
<script>
 //引入组件
   import HomeHeader from '@/pages/home/components/Header'
   import HomeSwiper from '@/pages/home/components/Swiper'
   import HomeIcons from '@/pages/home/components/Icons'
   import HomeOther from '@/pages/home/components/Other'
   import HomeWeek from '@/pages/home/components/Week'
   import HomeFooter from '@/pages/home/components/Footer'
   import axios from 'axios'
    export default {
        name: "Home",
        components:{//注册组件
           HomeHeader,
           HomeSwiper,
           HomeIcons,
           HomeOther,
           HomeWeek,
           HomeFooter
        },
        data () {
            return {
              city:"",//header的城市
              swiper:[],
              icons:[],//icons组件数据
              hotbdan:[],
              yLike:[],
              weekList:[],
            }
        },
       methods :{
          getHomeInfo () {//请求数据
             axios.get('/api/index.json')
               .then(this.getHomeInfoSucc)
          },
         getHomeInfoSucc (res) {
           res=res.data;
           console.log(res);
           if(res.ret && res.data){//如果请求到数据，而且数据中包含data
              const data=res.data;
               this.city=data.city;//header组件的数据
               this.swiper=data.swiperList;//swiper组件的数据
               this.icons=data.iconList;//icons组件的数据
               this.hotbdan=data.hotJd;//other组件的数据
               this.yLike=data.yLike;//other组件猜你喜欢的数据
               this.weekList=data.WeekList;
           }
         }
       },
       //计算属性
       mounted () {//钩子函数 (一般是用来向后端发起请求拿到数据后做一些业务处理)
          this.getHomeInfo();
       }
    }
</script>

<style scoped>

</style>
